<template>
  <div class="monitor_page">
    <!-- table -->
    <div class="tabBox">
      <el-tabs type="border-card" v-model="activeName" @tab-click="clickTab" class="tabsBoxs">
        <el-tab-pane label="合成方向相对位移" name="AB">
          <el-card class="card_echarts" shadow="hover">
            <echarts-one-compose
              ref="EchartsOneAB"
              type="AB"
            />
          </el-card>
        </el-tab-pane>
        <el-tab-pane label="A0方向相对位移" name="A0">
          <el-card class="card_echarts" shadow="hover">
            <echarts-one-compose
              ref="EchartsOneAO"
              type="A0"
            ></echarts-one-compose>
          </el-card>
        </el-tab-pane>
        <el-tab-pane label="B0方向相对位移" name="B0">
          <el-card class="card_echarts" shadow="hover">
            <echarts-one-compose
              ref="EchartsOneBO"
              type="B0"
            ></echarts-one-compose>
          </el-card>
        </el-tab-pane>

        <!-- <el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane> -->
      </el-tabs>

    </div>


    <x-loading v-show="isLoading"></x-loading>

  </div>

</template>

<script>
  import EchartsOneCompose from "../monitor-echarts/app/echarts-1-app";
  import ItemMixins from "./item.mixins";
  import {sbwyDepth, sbwyDepthEchart} from "@/services/model/project-info";
  import XLoading from '@/components/animation/x-loading.vue'

  export default {
    mixins: [ItemMixins],
    components: {EchartsOneCompose,XLoading},
    props: ["typeOneUmumList", "calcType", "calcVal"],
    data() {
      return {
        pointId: '1348285821564854273',
        isEcharts: 0,
        activeName: "AB",
        isLoading: false,
        // 当前的图表钩子
        chartsName: ["EchartsOneAB", "EchartsOneAO", "EchartsOneBO",],
        // 分页参数
        form: {
          page: 1,
          pageSize: 15,
          total: 0,
        },
        // 弹窗title
        dialogTitle: "",
        // 是否显示弹窗
        isShowDialog: false,
      };
    },

    computed: {
      // 筛选类型改变
      detailList() {
        return (
          this.typeOneUmumList.find((x) => x.code === this.calcTypeModel)
            ?.relationTypeList || []
        );
      },
      calcTypeModel: {
        get() {
          return this.calcType;
        },
        set(value) {
          this.$emit("update:calcType", value);
        },
      },
      calcValModel: {
        get() {
          return this.calcVal;
        },
        set(value) {
          this.$emit("update:calcVal", value);
        },
      },
    },
    methods: {
      bb(){
        this.lable = 'lable'
      },
      setWarningLine() {
      },
      //执行进行echart随着窗口改变方法，让数据重新渲染，
      clickTab() {
        this.chartsName.map((name) => {
          this.$nextTick(() => {
            this.$refs[name].echartResize();
          });
        });
      },
      // type cpmpose 合成位移  AO    BO
      async showDialog(endCreateTime, startCreateTime) {
        this.isLoading=true
        const {data} = await sbwyDepthEchart({
          monitorType: 1,
          pointId: this.pointId,
          endCreateTime: endCreateTime,
          startCreateTime: startCreateTime
        });
        this.collectionList = data?.recordList || []
        this.form.total = this.collectionList.length;
        this.selectionList = JSON.parse(JSON.stringify(this.tableList));
        let holeDepth = data?.holeDepth || 0
        this.chartsName.map(async (name) => {
          // holeDepth  当操作数据更新时，this.monitorInfo 可能未拿到值 所以通过传递
          this.$refs[name].updateEchart(this.selectionList, holeDepth);
        });
        this.isLoading=false
        if(this.collectionList ===[]||this.collectionList == null){
          hasData = false
        }else{
          hasData = true
        }

      },
    },
    mounted() {
      // http://192.168.41.117:8081/draw?pointId=1466000016376193026&startCreateTime=1638347372000&endCreateTime=1638520172053
      let str = this.$route.fullPath
      let strs = str.slice(6)
      let a = strs.split("&")
      let pointId
      let startCreateTimes
      let endCreateTimes
      for (let i = 0; i < a.length; i++) {
        pointId = a[0].slice(8)
        startCreateTimes = a[1].slice(16)
        endCreateTimes = a[2].slice(14)
      }
      this.pointId = String(pointId)
      this.showDialog(endCreateTimes, startCreateTimes)
    },
  };
  var hasData = false
  window["canDownload"] = function () {
    return hasData
  }
</script>

<style scoped="scoped" lang="less">
  @import url("./commom.less");

  .monitor_page {

    width: 100vw;
    height: 100vh;


  }
.tabsBoxs{
  width: 100%;
  height: 100vh;
  /*background: red;*/
  overflow: hidden;
}
  // 还需自定义的css
  .card_echarts {
    width: 100vw;
    height: 90vh;
    /*background: red;*/
  }
.tabBox{
  width: 100%;
  height: 100%;
}

</style>
